import 'package:flutter/material.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
import './product_detail.dart';

class GoodsInfo {
  String img;
  String name;
  String desc;
  double price;
  GoodsInfo(this.img, this.name, this.desc, this.price);
}
class ClassifiedGoods {
  String title;
  String mainImg;
  double height;
  List<GoodsInfo> goods;
  ClassifiedGoods(this.title, this.mainImg, this.height, this.goods);
}

class Classify extends StatefulWidget {
  const Classify({Key? key}) : super(key: key);

  @override
  _ClassifyState createState() => _ClassifyState();
}

class _ClassifyState extends State<Classify> {
  // 当前选中索引
  late int _currentIndex;
  // 左侧菜单栏
  final List typeName = ['IQOO', 'NEX', 'X系列', 'S系列', 'Y系列', 'Z系列', 'U系列', '手机充电', '手机配件', '音乐设备', '智能硬件', '游戏摄影', '日用出行'];
  // 右侧商品
  final List classifiedGoods = [
    ClassifiedGoods('IQOO', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('NEX', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('X系列', 'assets/images/banner_map.png',0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('S系列', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
    ]),
    ClassifiedGoods('Y系列', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('Z系列', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('U系列', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('手机充电', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('手机配件', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('音乐设备', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
    ]),
    ClassifiedGoods('智能硬件', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('游戏摄影', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
    ClassifiedGoods('日用出行', 'assets/images/banner_map.png', 0, [
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
      GoodsInfo('assets/images/product1.png','iQOO5 5G版 8GB+128GB大内存', '高通骁龙865，5000mAh大电池', 2799),
      GoodsInfo('assets/images/product2.png','iQOO U1x 全网通版6G手机', '高通骁龙662，5000mAh大电池', 1999),
    ]),
  ];
  // 右侧滚动控制器
  final ItemScrollController _itemScrollController1 = ItemScrollController();
  // 左侧滚动控制器
  final ItemScrollController _itemScrollController2 = ItemScrollController();
  final ItemPositionsListener _itemPositionsListener = ItemPositionsListener.create();
  // 右侧滚动带动左侧的开关
  bool switchScroll = false;

  @override
  void initState() {
    _currentIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final vw = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            width: 81.0,
            decoration: const BoxDecoration(
              border: Border(right: BorderSide(width: 1.0, color: Color(0xffe6e6e6)))
            ),
            child: ScrollablePositionedList.builder(
              itemCount: typeName.length,
              itemScrollController: _itemScrollController2,
              itemBuilder: (BuildContext context, int index){
                return GestureDetector(
                  onTap: (){
                    setState(() {
                      _currentIndex = index;
                      switchScroll = false;
                    });
                    _itemScrollController1.scrollTo(
                        index: _currentIndex,
                        duration: const Duration(milliseconds: 500),
                        curve: Curves.linear
                    );
                  },
                  child: Container(
                    padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border(left: BorderSide(width: 2, color: index==_currentIndex?const Color(0xfff10313):Colors.transparent)),
                      ),
                      child: Center(
                        child: Text(typeName[index], style: TextStyle(color: index==_currentIndex?const Color(0xfff10313):Colors.black),),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: NotificationListener(
              onNotification: (ScrollNotification notification) {
                _itemPositionsListener.itemPositions.addListener((){
                  // 当前可是的项目索引
                  // print(_itemPositionsListener.itemPositions.value.first.index);
                  if(_currentIndex != _itemPositionsListener.itemPositions.value.first.index && switchScroll==true) {
                    setState(() {
                      _currentIndex = _itemPositionsListener.itemPositions.value.first.index;
                    });
                    _itemScrollController2.scrollTo(
                      index: _currentIndex,
                      duration: const Duration(milliseconds: 200),
                      curve: Curves.linear
                    );
                  }
                });
                return true; // 返回值是防止冒泡， false是可以冒泡
              },
              child: GestureDetector( //按下时就把开关打开
                onPanDown: (details) {
                  setState(() {
                    switchScroll = true;
                  });
                },
                child: ScrollablePositionedList.builder(
                  padding: const EdgeInsets.fromLTRB(12.0, 0, 12.0, 0),
                  itemScrollController: _itemScrollController1,
                  itemPositionsListener: _itemPositionsListener,
                  itemCount: classifiedGoods.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Column(
                      key: ValueKey('classify$index'),
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        GestureDetector(
                          child: Padding(
                            padding: const EdgeInsets.fromLTRB(0, 16.5, 0, 16.5),
                            child: Image(image: AssetImage(classifiedGoods[index].mainImg),),
                          ),
                          onTap: () { print('点我你想干嘛'); },
                        ),
                        Padding(
                          padding: const EdgeInsets.only(bottom: 15.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Container(width: 18.5, height: 1, color: const Color(0xffdddddd), margin: const EdgeInsets.only(right: 12.5),),
                              Text(classifiedGoods[index].title, style: const TextStyle(fontSize: 12.0),),
                              Container(width: 18.5, height: 1, color: const Color(0xffdddddd), margin: const EdgeInsets.only(left: 12.5),),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: classifiedGoods[index].goods.length * ((vw-105) * 1.35) / 4,
                          child: GridView.builder(
                            physics: const NeverScrollableScrollPhysics(), //禁用滚动
                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 2,
                                mainAxisSpacing: 0,
                                crossAxisSpacing: 0,
                                childAspectRatio: 1/1.35
                            ),
                            // scrollDirection: Axis.vertical,
                            itemCount: classifiedGoods[index].goods.length,
                            itemBuilder: (BuildContext context, int i ) {
                              return Container(
                                padding: const EdgeInsets.fromLTRB(7, 16.5, 7, 16.5),
                                child: GestureDetector(
                                  onTap: (){ Navigator.of(context).push(MaterialPageRoute(builder: (context)=>const ProductDetail()));},
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      Image(image: AssetImage(classifiedGoods[index].goods[i].img), width: 60.0, height: 74.0,),
                                      Container( //商品名称
                                        width: 138.0,
                                        padding: const EdgeInsets.only(top: 22.0),
                                        child: Center(
                                          child: Text(
                                            classifiedGoods[index].goods[i].name,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: const TextStyle(
                                                color: Colors.black,
                                                fontSize: 12.0
                                            ),
                                          ),
                                        ),
                                      ),
                                      Container( //商品详情
                                        width: 138.0,
                                        padding: const EdgeInsets.fromLTRB(0, 2.5, 0, 7.5),
                                        child: Center(
                                          child: Text(
                                            classifiedGoods[index].goods[i].desc,
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: const TextStyle(
                                                color: Color(0xff8f8f8f),
                                                fontSize: 12.0
                                            ),
                                          ),
                                        ),
                                      ),
                                      Center(
                                        child: Text(
                                          '¥${classifiedGoods[index].goods[i].price}',
                                          maxLines: 1,
                                          overflow: TextOverflow.ellipsis,
                                          style: const TextStyle(
                                              fontSize: 12.0
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}
